<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-image :src="image" width="200" height="200" />
      </view>
    </view>
    
    <!-- 填充模式 -->
    <view class="demo-block">
      <view class="demo-block__title">填充模式</view>
      <view class="demo-block__content">
        <fu-image 
          v-for="mode in modes"
          :key="mode"
          :src="image"
          :mode="mode"
          width="200"
          height="200"
        >
          <template #loading>
            <text class="mode-text">{{ mode }}</text>
          </template>
        </fu-image>
      </view>
    </view>
    
    <!-- 圆形图片 -->
    <view class="demo-block">
      <view class="demo-block__title">圆形图片</view>
      <view class="demo-block__content">
        <fu-image 
          :src="avatar" 
          width="200" 
          height="200"
          round
        />
      </view>
    </view>
    
    <!-- 加载中提示 -->
    <view class="demo-block">
      <view class="demo-block__title">加载中提示</view>
      <view class="demo-block__content">
        <fu-image 
          :src="image" 
          width="200" 
          height="200"
        >
          <template #loading>
            <fu-icon name="loading" size="36" />
          </template>
        </fu-image>
      </view>
    </view>
    
    <!-- 加载失败 -->
    <view class="demo-block">
      <view class="demo-block__title">加载失败</view>
      <view class="demo-block__content">
        <fu-image 
          src="x.jpg"
          width="200"
          height="200"
        >
          <template #error>
            <text>加载失败</text>
          </template>
        </fu-image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      image: 'https://img.yzcdn.cn/vant/cat.jpeg',
      avatar: 'https://img.yzcdn.cn/vant/logo.png',
      modes: [
        'scaleToFill',
        'aspectFit',
        'aspectFill',
        'widthFix',
        'heightFix'
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background: #fff;
    border-radius: var(--fu-radius-base);
    padding: 30rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }
}

.mode-text {
  font-size: 24rpx;
  color: var(--fu-text-color);
}
</style> 